<template>
	<view>
		<view class="reviport_top">
			<view class="report_num">
				<image src="/static/curr/report_num.png" mode=""></image>
				<view class="report_text">
					<view class="">
						<text class="f60">{{ ratio }}</text><text class="f40">%</text>
					</view>
					<view class="gray9" style="text-align: center;">正确率</view>
				</view>
			</view>
			<view class="tc gray3 f30 fb mb23">抗遗忘复习情况统计</view>
			<view class="tc f26 mb16">学生姓名:{{ nickname }}</view>
			<view class="tc f26">学生编号:{{ userNo }}</view>
			<view class="reviport_top_box">
				<view class="reviport_top_box_item mb20">
					<view class="reviport_top_box_item_num">{{ totalNum }}个</view>
					<view class="f26 gray3">需复习</view>
				</view>
				<view class="reviport_top_box_item mb20">
					<view class="reviport_top_box_item_num">{{ readyNum }}个</view>
					<view class="f26 gray3">已复习</view>
				</view>
				<view class="reviport_top_box_item">
					<view class="reviport_top_box_item_num">{{ noNum }}个</view>
					<view class="f26 gray3">遗忘数</view>
				</view>
				<view class="reviport_top_box_item">
					<view class="reviport_top_box_item_num">{{ noReviewNum }}个</view>
					<view class="f26 gray3">未复习</view>
				</view>
			</view>
		</view>
		<view class="reviport_bot">
			<view class="f30 fb gray3 mb10">本次遗忘记录</view>
			<view class="reviport_bot_item" v-for="(item, index) in list" :key="index" :class="{'reviport_bot_item1':index < list.length-1}" @tap="getVoice(item.word)">
				<view class="d-b-c">
					<view class="d-a-c">
						<view class="reviport_bot_item_dian"></view>
						<view class="">
							<view class="gray3 fb f30">{{ item.word }}</view>
						</view>
					</view>
					<view class="">
						<u-icon name="volume" color="#333333" size="30"></u-icon>
					</view>
				</view>
				<view class="gray9 f26 ml20 mt20">{{ item.chinese }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: getApp().globalData.imgUrl,
				courseId: 0,
				yesIds: '',
				noIds: '',
				ratio: 0,
				nickname: '',
				userNo: '',
				totalNum: 0,
				readyNum: 0,
				noNum: 0,
				noReviewNum: 0,
				list: [],
			}
		},
		onLoad(option) {
			if (!this.$store.state.isLogin) {
				uni.$u.toast('登录超时请重新登录')
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}, 1500)
				return false
			} else {
				if (option.courseId) {
					this.courseId = option.courseId
				} else {
					uni.navigateBack()
				}
				if (option.yesIds || option.noIds) {
					this.yesIds = option.yesIds
					this.noIds = option.noIds
					this.getReport()
				} else {
					uni.navigateBack()
				}
			}
		},
		onBackPress(option) {
			if (option.from == 'navigateBack' || option.from == 'backbutton') {
				uni.reLaunch({
					url: '/pages/study/study?courseId='+this.courseId
				})
				return true
			}
			return false
		},
		methods: {
			getReport() {
				this.$u.post(this.$u.api.reviewReport21, {
					yes_ids: this.yesIds,
					no_ids: this.noIds,
				}).then((res) => {
					console.log(res)
					let data = res.data
					this.ratio = data.ratio
					this.nickname = data.nickname
					this.userNo = data.user_id
					this.totalNum = data.total_num
					this.readyNum = data.ready_num
					this.noNum = data.no_num
					this.noReviewNum = data.no_review_num
					this.list = data.no_list
				}).catch((res) => {
					console.log(res)
				})
			},
			// 获取单词音频
			getVoice(word) {
				this.$u.post(this.$u.api.wordVoice, {
					word: word,
					type: this.$store.state.voiceType
				}).then((res) => {
					this.utils.playAudio(this.imgUrl + res.data)
				}).catch((err) => {
					console.log(err)
					uni.$u.toast(err.data.msg)
				})
			},
		}
	}
</script>

<style lang="less">
	.reviport_top{
		width: 92%;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		margin: 30rpx auto;
	}
	.report_num{
		width: 246rpx;
		height: 246rpx;
		margin: 0 auto 40rpx;
		color: #3777E5;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		image{
			width: 246rpx;
			height: 246rpx;
		}
		.report_text{
			position: absolute;
		}
	}
	.reviport_top_box{
		margin-top: 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	.reviport_top_box_item{
		width: 47%;
		background: #F6F7F9;
		border-radius: 20rpx;
		padding: 35rpx 30rpx 40rpx;
		box-sizing: border-box;
	}
	.reviport_top_box_item_num{
		font-weight: bold;
		font-size: 40rpx;
		color: #3777E5;
		margin-bottom: 33rpx;
	}
	.reviport_bot{
		width: 92%;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx 30rpx 10rpx;
		margin: 30rpx auto;
	}
	.reviport_bot_item{
		padding: 30rpx 0;
	}
	.reviport_bot_item_dian{
		width: 10rpx;
		height: 10rpx;
		background: #347FF1;
		border-radius: 50%;
		margin-right: 10rpx;
	}
	.reviport_bot_item1{
		border-bottom: 2rpx solid #EEEEEE;
	}
</style>
